<template>
	<view class="page">
		<!-- 顶部背景与导航 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill" />
		<u-navbar title="土壤抽样单管理" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder>
			<!-- <view class="u-nav-slot" slot="right">
				<view class="nav-export-btn" @click="onExport">导出抽样单</view>
			</view> -->
		</u-navbar>
		<view class="content">
			<!-- 筛选区域 -->
			<view class="filters">
				<!-- 顶部搜索条 -->
				<!-- <view class="search-bar">
					<uni-easyinput v-model="filters.keyword" placeholder="请输入关键词" clearable prefixIcon="search" />
					<button class="btn btn-search" @click="onSearch">
						<u-icon name="search" color="#fff" size="18" style="margin-right:8rpx" />搜索
					</button>
				</view> -->

				<view class="row">
					<text class="label">检测年份</text>
					<view class="range">
						<picker mode="date" fields="year" :value="startYearValue" @change="onStartYearChange">
							<view class="picker-input">
								<u-icon name="calendar" color="#29a74d" size="18" class="ico" />
								<text class="placeholder" v-if="!filters.year">选择年份</text>
								<text v-else>{{ filters.year }}</text>
							</view>
						</picker>
					</view>
				</view>

				<view class="row">
					<text class="label">检测级别</text>
					<view class="ctrl">
						<input v-model="filters.detectionLevel" placeholder-class="placeholder" style="width: 100%;"
							type="text" class="picker-input" placeholder="请输入检测级别" />
					</view>
				</view>

				<!-- <view class="row">
					<text class="label">抽样地区</text>
					<view class="ctrl with-btn">
						<uni-data-select v-model="filters.region" :localdata="regionOpts" placeholder="请选择省/市/区县" />
						<button class="btn btn-ghost" @click="onQueryRegion">查询</button>
					</view>
				</view> -->

				<view class="row">
					<text class="label">产品名称</text>
					<view class="ctrl with-btn">
						<input v-model="filters.product" placeholder-class="placeholder" style="width: 100%;"
							class="picker-input" type="text" placeholder="请输入产品名称" />
					</view>
				</view>
				<button class="btn btn-ghost" @click="onQueryRegion">查询</button>
			</view>

			<!-- 列表 -->
			<view class="list">
				<view class="card" v-for="item in list" :key="item.id">
					<view class="info">
						<view class="line head">
							<text class="year">{{ item.year }}</text>
							<view class="ops sm">
								<button class="op" @click="openDetail(item)">抽样单详情</button>
								<button class="op" style="margin-left: 20rpx;" @click="openDetect(item)">检测信息</button>
							</view>
						</view>
						<view class="line subt"><text class="k">检测类别：</text>{{ item.typeName }}<text
								class="k pad">样品名称：</text>{{ item.sampleName }}</view>
						<view class="line subt"><text class="k">抽样品种：</text>{{ item.variety }}<text
								class="k pad">抽样单位：</text>{{ item.unit }}</view>
						<view class="line subt"><text class="k">抽样地点：</text>{{ item.address }}</view>
						<view class="line subt"><text class="k">任务来源：</text>{{ item.source }}</view>
						<view class="line subt"><text class="k">检测机构：</text>{{ item.org }}</view>
						<view class="time">{{ item.time }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { trcylistAll } from '@/api/sylin/index.js'
import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			filters: {
				year: '',
				product: '',
				detectionLevel: ''
			},
			typeOpts: [],
			regionOpts: [],
			sampleOpts: [],
			list: []
		}
	},
	computed: {
		startYearValue() {
			return this.filters.year ? `${this.filters.year}-01-01` : ''
		}
	},
	methods: {
		async gettrcylistAll() {
			const res = await trcylistAll()
			console.log(res)
		},
		onExport() {
			/* TODO: 导出逻辑 */
		},
		onSearch() {
			/* TODO: 查询接口 */
		},
		onReset() {
			this.filters = {
				keyword: '',
				year: '',
				type: '',
				region: '',
				sample: ''
			}
		},
		onStartYearChange(e) {
			const y = String(e?.detail?.value || '').split('-')[0] || '';
			this.filters.year = y
		},
		onQueryRegion() {
			/* TODO: 地区查询弹窗/选择 */
		},
		openDetail(item) {
			/* 跳转详情 */
		},
		openDetect(item) {
			/* 跳转检测信息 */
		}
	}
}
</script>

<style lang="scss">
/* 绿色主题变量 */
$brand: #29a74d;
$brand-weak: #e9f7ee;
$brand-border: #cfe9db;
$brand-strong: #239243;
$ink-2: #424b57;

.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 180rpx;
	z-index: 2;
}

.page {
	background: #f6f7fb;
	min-height: 100vh;
}

.content {
	padding: 24rpx;
}

/* 顶部右侧导出按钮 */
.nav-export-btn {
	background: $brand-weak;
	color: $brand-strong;
	border-radius: 14rpx;
	height: 64rpx;
	line-height: 64rpx;
	padding: 0 26rpx;
	font-size: 26rpx;
	box-shadow: 0 2rpx 8rpx rgba(41, 167, 77, 0.10);
	border: 1rpx solid $brand-border;
}

/* 筛选卡片 */
.filters {
	position: relative;
	background: #fff;
	border: 1rpx solid #e3f3ea;
	border-radius: 18rpx;
	padding: 16rpx 16rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 6rpx 18rpx rgba(12, 18, 28, 0.04);
}

.search-bar {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 8rpx 6rpx 6rpx;
}

::v-deep .search-bar .uni-easyinput__content {
	height: 72rpx;
	border-radius: 999rpx;
	border-color: $brand-border;
	background: $brand-weak;
}

::v-deep .search-bar .is-input-focus .uni-easyinput__content {
	border-color: $brand;
	box-shadow: 0 0 0 2rpx rgba($brand, 0.15);
}

.btn-search {
	background: linear-gradient(90deg, lighten($brand, 2%), $brand-strong);
	color: #fff;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 26rpx;
	border-radius: 999rpx;
	font-size: 26rpx;
	box-shadow: 0 6rpx 14rpx rgba(37, 154, 68, 0.22);
	display: inline-flex;
	align-items: center;
	gap: 10rpx;
	white-space: nowrap;
}

.row {
	display: flex;
	align-items: center;
	padding: 10rpx 6rpx;
}

.label {
	color: #666;
	font-size: 28rpx;
	white-space: nowrap;
	margin-right: 10rpx;
}

.range {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12rpx;
	align-items: center;
	min-width: 0;
}

.picker-input {
	height: 72rpx;
	border: 1rpx solid $brand-border;
	border-radius: 14rpx;
	padding: 0 20rpx;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-width: 0;
	background: $brand-weak;
}

.picker-input .ico {
	margin-right: 10rpx;
}

.picker-input .placeholder {
	color: #999;
}

.ctrl {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.btn {
	border: none;
}

.btn-ghost {
	background: $brand-weak;
	color: $brand-strong;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 24rpx;
	border-radius: 14rpx;
	font-size: 26rpx;
	box-shadow: inset 0 0 0 1rpx $brand-border;
	margin-left: 10rpx;
}

.btn-ghost.gray {
	background: #d1d5db;
	color: #fff;
	box-shadow: none;
	border: none;
}

::v-deep .uni-select,
::v-deep .uni-stat__select .uni-select {
	height: 72rpx;
	min-height: 72rpx;
	border-radius: 14rpx;
	border-color: $brand-border;
	background: $brand-weak;
}

::v-deep .uni-select__input-text {
	line-height: 72rpx;
	font-size: 28rpx;
}

/* 列表卡片 */
.list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.card {
	background: #fff;
	border: 1rpx solid #e3f3ea;
	border-radius: 18rpx;
	padding: 18rpx;
	box-shadow: 0 8rpx 22rpx rgba(12, 18, 28, 0.05);
}

.info {
	min-width: 0;
}

.ops.sm {
	display: flex;
	gap: 12rpx;
	margin-left: auto;
}

.op {
	background: #fff;
	color: $brand-strong;
	border: 1rpx solid $brand-border;
	border-radius: 16rpx;
	height: 56rpx;
	line-height: 56rpx;
	padding: 0 20rpx;
	font-size: 24rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(41, 167, 77, 0.08);
}

.line {
	color: #333;
	font-size: 28rpx;
	line-height: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

.line.head {
	display: flex;
	align-items: center;
}

.year {
	font-weight: 700;
	margin-right: 14rpx;
	color: $brand-strong;
}

.k {
	color: #666;
}

.k.pad {
	margin-left: 18rpx;
}

.subt {
	color: #6b7280;
}

.time {
	margin-top: 10rpx;
	color: darken($brand, 10%);
	font-size: 24rpx;
	background: mix($brand-weak, #fff, 70%);
	padding: 8rpx 12rpx;
	border-radius: 10rpx;
	display: inline-block;
	border: 1rpx solid $brand-border;
}
</style>